<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-common__json_dialog">
		
		
		<el-dialog
		  title="格式化校验"
		  :visible.sync="visible"
		  width="80%"
		  top="3vh"
		  :close-on-click-modal="true" :close-on-press-escape="true"
		  @closed="exit"
		  >
		  
		 <div class="f">
			  <el-input
				type="textarea"
				:rows="dialogH"
				placeholder="JSON内容"
				v-model="dataForm.value">
			  </el-input>
		  </div>
		  
		  
		  <span slot="footer" class="dialog-footer">
			<div style="float: left;">
				<el-link icon="el-icon-warning-outline" href="https://www.bejson.com/" target="_blank" style="margin-right: 10px;">高级JSON格式化</el-link>
				<el-button size="small" type="info" :plain="true" @click="cls()">清空</el-button>
				<el-button size="small" type="primary" :plain="true" @click="zy(true)">转 义</el-button>
				<el-button size="small" type="warning" :plain="true" @click="zy(false)" >去转义</el-button>
				<el-button type="primary" v-if="isHH" size="mini" @click="toHH(!isHH)">不换行</el-button>
				<el-button  type="primary" v-if="!isHH" size="mini" @click="toHH(!isHH)">换行</el-button>
				<el-button size="small" type="success" :plain="true" @click="copy(dataForm.value,false)" style="margin-left: 20px;">复 制</el-button>
			</div>
		    <el-button size="small" type="primary" @click="toJson()">格式化校验</el-button>
			<el-button size="small" type="success" @click="toStr()">压 缩</el-button>
			<el-button size="small" @click="visible = false">取 消</el-button>
		  </span>
		</el-dialog>
	  
    </div>
  </el-card>
</template>

<script>
import { copyText } from '@/utils'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
		visible: false,
		isHH: false,
		dialogH: (window.innerHeight) / 30,
		dataForm: { value: "" }
	}
  },
  props:{
  	  extendsParam:{
  		  type: Object,
  		  default: false
  	  }
  },
  mounted() {
	  
  },
  components: {
	  
  },
  methods:{
	init () {
		this.visible = true
		this.$nextTick(() => {
			this.dataForm = {}
			var temp = this.extendsParam;
			this.dataForm = temp;
			this.toHH(this.isHH)
		})
	}
	,copy(t,i){
		copyText(t,i);
	}
	,cls(){
		if(this.dataForm.value){
			this.dataForm.value = ''
			this.$message.success('清空成功~');
		}else{
			this.$message.error('已清空~');
		}
	}
	,toJson(){
		//判断是否是json
		var re = this.isJson();
		if( re ){
			this.dataForm.value = JSON.stringify(JSON.parse(this.dataForm.value), null, '\t')
			this.toHH(true)
			this.$message.success('校验成功~');
		}
	}
	,toStr(){
		var re = this.isJson();
		if( re ){
			this.dataForm.value = JSON.stringify(JSON.parse(this.dataForm.value))
			this.toHH(false)
			this.$message.success('压缩成功~');
        }
	}
	,isJson(){
		if(this.dataForm.value){
			try {
			    JSON.parse(this.dataForm.value);
				return true;
			} catch(e) {
				this.$message.error('JSON格式有误，请检查是否为JSON');
				return false;
			}
		}else{
			this.$message.error('字符串为空');
			return false;
		}
	}
	
	,zy(b){
		if( b === true ){
			var t = this.dataForm.value;
			this.dataForm.value = t.replace(/"/g,'\u005C"');
			this.$message.success('转义成功~');
		}else{
			var t = this.dataForm.value;
			this.dataForm.value = t.replace(/\u005C/g,'');
			this.$message.success('去转义成功~');
		}
	}
	,toHH(isHHH){
		var father = document.getElementsByClassName('f')[0];
		var edit = father.getElementsByTagName('textarea')[0];
		
		isHHH ? edit.setAttribute('wrap','off') : edit.removeAttribute("wrap");
		this.isHH = isHHH
	},
	exit(){
		this.toHH(false)
		this.isHH = false;
		this.dataForm = {}
	}
  }
  ,
  destroyed () {
	  
  }
}
</script>

